<!--快速预约模块-->
<template>
    <div class="div">
        
        <!-- 头部 -->
      <van-nav-bar title="快速预约" left-text="" fixed  @click-left="onClickLeft" left-arrow>
        </van-nav-bar>
        <div class="top"></div>
        <!-- 信息填写 -->
        <!-- 预约人身份证号码 -->
        <p><span>*</span>预约人身份证号码 </p>
        <van-cell-group>
        <van-field v-model="idcard"  placeholder="请输入身份证号码" />
        </van-cell-group>
        <!-- 获取当前位置 -->
         <p><span>*</span>预约人电话号码</p>
         <van-cell-group>
        <van-field v-model="phone"  placeholder="请输入电话号码" />
        </van-cell-group>
        <!-- 预约针刺 -->
        <p><span>*</span>预约针次</p>
        <input type="radio" name="one" value="1" checked id="r1"><label for="r1">第一针</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="one" value="2" id="r2"><label for="r2">第二针</label>
        <!-- <input type="checkbox" name="" id=""> -->
        <!-- 街道 -->
         <p><span>*</span>街道</p>
         <van-cell-group>
        <van-field v-model="address"  placeholder="请输入您当前街道" />
        </van-cell-group>
        <!-- 日历 -->
          <van-calendar
            @select='seleted'
            class="rili"
            :poppable="false"
            :show-confirm="false"
            :style="{ height: '350px' }"
            />
            <!-- 确认预约 -->
            <van-button class="dele2" type="primary" @click="postlist" block>确认预约</van-button>
        <van-calendar v-model="show" @confirm="onConfirm" />
        <div></div>
    </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
    data() {
        return {
            date: '',
            show: false,
            idcard:'',
            phone:'',
            address:'',
            savedata:0,
            number:0,
        }
    },
    methods: {
        onClickLeft(){
            history.go(-1);
        },
        // 获取日历
      formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    seleted(e){
        //获取日历
        // console.log(e)
        let date = new Date(e).getTime()
        this.savedata = date;
        // console.log(this.savedata)
    },
    postlist(){
        //获取针次
        let ra = document.querySelectorAll('input[type="radio"]')
        for(var i = 0;i<ra.length;i++){
            if(ra[i].checked){
                // console.log(ra[i].value) 
                //存入data数据中
                this.number = ra[i].value;
                
            }
        }
        //身份证正则   
        var reg_id = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        //电话号码正则
        var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        
        console.log(reg_id.test(this.idcard))
        //判断输入非法
        if(!this.idcard || !reg_id.test(this.idcard)){
            Dialog({ message: '身份证输入不正确！'})  
            return
        }
        else if(!this.phone || !reg_tel.test(this.phone)){
            Dialog({ message: '手机号码不正确！'})  
            return
        }
        else if(!this.address){
            Dialog({ message: '地址不能为空！'})  
            return
        }
        else if(!this.savedata){
            Dialog({ message: '日期时间不正确！'})  
            return
        }
        else{
            //执行预约
            //发送请求，执行注册业务
            console.log(this.$store.state.uid)
                this.axios.post('regit',`userid=${this.$store.state.uid}&time=${this.savedata}&address=${this.address}&idcard=${this.idcard}&phone=${this.phone}&number=${this.number}`).then(res=>{
                    // console.log(res)
                    if(res.data.code===201){
                        //已预约
                        Dialog({ message: '您已预约不能重复预约！'})   
                        this.$router.push("/Appointment")                              
                    }else if(res.data.code===200){
                        //预约成功
                        Dialog({ message: '预约成功！'})   
                        this.$router.push("/Appointment") 
                    }else{
                        //预约成功
                        Dialog({ message: '预约失败！'})   
                        // this.$router.push("/Appointment")
                        return;
                    }
                })
        }    
    }
    }
}
</script>


<style scoped>
.rili >>>.van-calendar__header-title{
    /* margin-left: -100px; */
    margin-left: -15px;
    width: 100px;
    /* border: 1px solid red; */
}
.rili >>>.van-calendar__header-title::before{
   content: "*";
   color: red;
}
/* 日期标题位置 */
.van-calendar__header-title{
    margin-left: -100px;
    border: 1px solid red ;
    
}
/* 设置* 号的颜色 */
 p span{
    color: red;
}
/* 设置边距 */
.div{
    padding: 0 25px;
}
.dele{
    margin-top: 46px;
    background-color: rgb(255, 218, 175);
    border-color: rgb(255, 218, 175);
    width: 80%;
    margin: 0px auto;
}
.dele2{
    margin-top: 10px;
    width: 80%;
    margin: 10px auto;
}
.top{
    margin-top: 46px;
}
input[type='radio']{
    margin: 15px auto;
    
}
input{
    -webkit-appearance:button !important;
}

</style>